<template>
  <el-card shadow="never">
    <div slot="header" class="clearfix">
      <span>{{partition.id ? '编辑分区': '新建分区'}}</span>
    </div>
    <el-form :model="partition" ref="form">
      <el-form-item prop="normalizedName" :rules="[{required:true,message:'请填写分区名称'}]">
        <el-input placeholder="名称" v-model="partition.normalizedName" />
      </el-form-item>
      <el-form-item prop="name">
        <el-input placeholder="别名（留空则与分区名称相同）" v-model="partition.name" />
      </el-form-item>
      <el-form-item prop="sort">
        <el-input placeholder="排序权重（数字越大排序越靠前，默认99）" v-model="partition.sort" />
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="partition.isDeleted">放入回收站</el-checkbox>
      </el-form-item>
    </el-form>
    <div class="card-footer">
      <div class="pull-right">
        <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
        <submit-button @click="submit" :loading="submiting">保存</submit-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import Vue from "vue";
import { createPartition, updatePartition } from "@/api/dicts/partition";
import { SubmitButton } from "@/components/aws-comp/index";

Vue.component(SubmitButton.name, SubmitButton);

export default {
    name: "client-create",
    data() {
        return {
            filename: __filename,
            /**请求接口返回 */
            submiting: false
        };
    },
    components: {},
    props: {
        partition: {
            type: Object,
            default: function() {
                return {
                    id: null,
                    name: null,
                    normalizedName: null,
                    sort: null,
                    isDeleted: false
                };
            }
        }
    },
    model: { prop: "partition", event: "saved" },
    methods: {
        submit: function() {
            var vm = this;
            this.$refs["form"].validate(valid => {
                if (valid) vm.doSubmit();
            });
        },
        doSubmit: function() {
            var vm = this;
            var method = this.partition.id ? updatePartition : createPartition;
            this.submiting = true;
            method(this.partition)
                .then(() => {
                    vm.submiting = false;
                    vm.$emit("saved", vm.partition);
                    vm.resetForm();
                })
                .catch(() => {
                    vm.submiting = false;
                });
        },
        resetForm() {
            this.partition = {};
            this.$refs["form"].resetFields();
        }
    },
    created() {}
};
</script>
<style scoped>
.card-footer {
    border-top: 1px solid #ebeef5;
    padding: 10px 20px 0 20px;
    margin: 0 -20px -10px -20px;
    overflow: hidden;
}
</style>

